<!DOCTYPE html>
<html>
<head>
    <title>Physics Waveform Diagram</title>
    <style>
        canvas {
            border: 1px solid #d3d3d3;
        }
    </style>
</head>
<body>

<canvas id="physicsCanvas" width="500" height="300"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.font = '16px sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // --- Define coordinates ---
    const yAxis = 130;
    const pulseCenterX = 260;
    const pulseWidth = 160;
    const pulseHeight = 100;

    const pulseStartX = pulseCenterX - pulseWidth / 2;
    const pulseEndX = pulseCenterX + pulseWidth / 2;
    const pulseVertexX = pulseCenterX;
    const pulseVertexY = yAxis + pulseHeight;

    // --- Draw Main Axis (time axis) ---
    ctx.beginPath();
    ctx.moveTo(30, yAxis);
    ctx.lineTo(470, yAxis);
    ctx.stroke();

    // Arrowhead for time axis
    ctx.beginPath();
    ctx.moveTo(470, yAxis);
    ctx.lineTo(460, yAxis - 5);
    ctx.moveTo(470, yAxis);
    ctx.lineTo(460, yAxis + 5);
    ctx.stroke();

    // Label 't' for time axis
    ctx.fillText('t', 480, yAxis);

    // --- Draw Triangular Pulse ---
    ctx.beginPath();
    ctx.moveTo(pulseStartX, yAxis);
    ctx.lineTo(pulseVertexX, pulseVertexY);
    ctx.lineTo(pulseEndX, yAxis);
    ctx.stroke();

    // --- Draw Dimension for Pulse Duration (20 ns) ---
    const dimTimeY = yAxis - 20;
    // Horizontal line
    ctx.beginPath();
    ctx.moveTo(pulseStartX, dimTimeY);
    ctx.lineTo(pulseEndX, dimTimeY);
    ctx.stroke();
    // T-terminators
    ctx.beginPath();
    ctx.moveTo(pulseStartX, dimTimeY - 5);
    ctx.lineTo(pulseStartX, dimTimeY + 5);
    ctx.moveTo(pulseEndX, dimTimeY - 5);
    ctx.lineTo(pulseEndX, dimTimeY + 5);
    ctx.stroke();
    // Text label
    ctx.fillText('20 ns', pulseCenterX, dimTimeY - 12);

    // --- Draw Dimension for Pulse Amplitude (I_max) ---
    const dimAmpX = 120;
    // Vertical line with arrows
    ctx.beginPath();
    ctx.moveTo(dimAmpX, yAxis);
    ctx.lineTo(dimAmpX, pulseVertexY);
    ctx.stroke();
    // Top arrowhead
    ctx.beginPath();
    ctx.moveTo(dimAmpX, yAxis);
    ctx.lineTo(dimAmpX - 5, yAxis + 10);
    ctx.moveTo(dimAmpX, yAxis);
    ctx.lineTo(dimAmpX + 5, yAxis + 10);
    ctx.stroke();
    // Bottom arrowhead
    ctx.beginPath();
    ctx.moveTo(dimAmpX, pulseVertexY);
    ctx.lineTo(dimAmpX - 5, pulseVertexY - 10);
    ctx.moveTo(dimAmpX, pulseVertexY);
    ctx.lineTo(dimAmpX + 5, pulseVertexY - 10);
    ctx.stroke();
    // Text label
    ctx.textAlign = 'left';
    ctx.fillText('I', dimAmpX + 10, pulseVertexY - pulseHeight / 2 - 5);
    ctx.font = '12px sans-serif';
    ctx.fillText('max', dimAmpX + 18, pulseVertexY - pulseHeight / 2 + 2);
    ctx.font = '16px sans-serif'; // Reset font

    // --- Draw Dashed Line indicating the peak level ---
    ctx.beginPath();
    ctx.setLineDash([5, 5]);
    ctx.moveTo(pulseVertexX, pulseVertexY);
    // Draw dashed segments as in the original image
    ctx.lineTo(pulseVertexX - 50, pulseVertexY);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(pulseVertexX - 60, pulseVertexY);
    ctx.lineTo(pulseVertexX - 110, pulseVertexY);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(pulseVertexX - 120, pulseVertexY);
    ctx.lineTo(pulseVertexX - 130, pulseVertexY); // To the dim line
    ctx.lineTo(pulseVertexX - 130, pulseVertexY - 10); // Corner tick
    ctx.stroke();
    ctx.setLineDash([]); // Reset to solid line

    // --- Draw Figure Caption ---
    ctx.textAlign = 'center';
    ctx.fillText('Fig. 3.6', canvas.width / 2, canvas.height - 15);

</script>

</body>
</html>